<!--
 * @Author: 宋杰
 * @Date: 2021-03-12 15:04:29
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-17 19:16:33
 * @Description: 一家十一口(猜一字)
-->
<template>
  <div class="right1">
    <!--准备一个dom容器-->
    <div ref="main" style="width:100%;height:100%"></div>
  </div>
</template>

<script>
//import {} from '';
export default {
  name: "",
  data() {
    return {
      chart: null,
      fontSize1: null,
      dataArray: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.widthA();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getData();
    this.draw();
  },
  //方法集合
  methods: {
    // 获取数据
    getData() {
      this.$fetch("/userPicture/getJobs")
        .then((res) => {
          console.log("职业res", res);
          if (res.code === 0) {
            res.datas.forEach((ele) => {
              this.dataArray.push({
                name: ele["JOB"],
                value: ele["NUM"],
              });
            });
            console.log("this.dataArray", this.dataArray);
          }
        })
        .catch((err) => {
          console.log("职业err", err);
        });
    },
    // 翻牌器文字随着屏幕的大小变化
    widthA() {
      var width = window.innerWidth;
      // 最小1366px，最大适配2560px
      if (width <= 1366) {
        this.fontSize1 = 15;
      } else if (1366 < width && width < 1681) {
        this.fontSize1 = 22;
      } else if (1680 < width && width < 1921) {
        this.fontSize1 = 25;
      } else if (1920 < width && width < 2561) {
        this.fontSize1 = 27;
      }
    },
    draw() {
      // 基于准备好的dom，初始化echarts
      this.chart = this.$echarts.init(this.$refs.main);
      let option = {
        title: {
          text: "主要用户职业为保险从业",
          left: "center",
          textStyle: {
            color: "#32C5FF",
            fontSize: 18,
            lineHeight: 18,
          },
        },
        tooltip: {
          //提示框，可以在全局也可以在
          trigger: "item", //提示框的样式
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          backgroundColor: "rgba(255,255,255,0.8)", //提示框的背景色
          textStyle: {
            //提示的字体样式
            color: "black",
          },
        },
        graphic: {
          //环形图中间添加文字
          type: "text", //通过不同top值可以设置上下显示
          left: "center",
          top: "45%",
          style: {
            text: "职业",
            textAlign: "center",
            fill: "#FFFFFF", //文字的颜色
            // width: '40%',
            // height: '40%',
            fontSize: this.fontSize1,
            fontFamily: "Microsoft YaHei",
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie", //环形图的type和饼图相同
            radius: ["35%", "50%"], //饼图的半径，第一个为内半径，第二个为外半径
            avoidLabelOverlap: false,
            color: [
              "#1F7192",
              "#32C5FF",
              "#2196C4",
              "#1F7192",
              "#184C61",
              "#001C27",
              "#0D2D3A ",
            ],
            label: {
              normal: {
                //正常的样式
                show: true,
                position: "left",
                //formatter: "{b},{per|{d}%}", //这里最后另一行设置了一个空数据是为了能让延长线与hr线对接起来
                color: "#aaa",
                padding: [0, -10], //取消hr线跟延长线之间的间隙
                rich: {
                  a: {
                    color: "#999",
                    lineHeight: 20, //设置最后一行空数据高度，为了能让延长线与hr线对接起来
                    align: "center",
                  },
                  hr: {
                    //设置hr是为了让中间线能够自适应长度
                    borderColor: "auto", //hr的颜色为auto时候会主动显示颜色的
                    width: "105%",
                    borderWidth: 0.5,
                    height: 0.5,
                  },
                  per: {
                    //用百分比数据来调整下数字位置，显的好看些。如果不设置，formatter最后一行的空数据就不需要
                    padding: [4, 0],
                  },
                },
              },
              emphasis: {
                //选中时候的样式
                show: true,
                textStyle: {
                  fontSize: "16",
                  fontWeight: "bold",
                },
              },
            },
            grid: {},
            data: [
              {
                name:'教师',
                value:50
              },
              {
                name:'IT',
                value:20
              },
              {
                name:'公务员',
                value:10
              },
              {
                name:'工人',
                value:10
              },
              {
                name:'会计',
                value:10
              },
            ],
            // data: this.dataArray,
          },
        ],
      };
      setTimeout(() => {
        this.chart.setOption(option);
      }, 700);
    },
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>
<style lang="scss" scoped></style>
